<template>
  <div class="emit-child">
    <h4 class="font-medium text-gray-800 mb-3">子组件发送事件给父组件：</h4>

    <div class="space-y-4">
      <!-- 简单消息发送 -->
      <div class="event-section">
        <h5 class="text-sm font-medium text-gray-700 mb-2">1. 发送简单消息</h5>
        <div class="flex space-x-2">
          <input
            v-model="simpleMessage"
            class="flex-1 p-2 border rounded-md text-sm"
            placeholder="输入要发送的消息"
          />
          <button
            @click="sendSimpleMessage"
            class="px-3 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
          >
            发送消息
          </button>
        </div>
      </div>

      <!-- 发送复杂数据 -->
      <div class="event-section">
        <h5 class="text-sm font-medium text-gray-700 mb-2">2. 发送复杂数据</h5>
        <div class="grid grid-cols-2 gap-2">
          <input
            v-model="complexData.type"
            class="p-2 border rounded-md text-sm"
            placeholder="事件类型"
          />
          <input
            v-model="complexData.value"
            class="p-2 border rounded-md text-sm"
            placeholder="数值"
            type="number"
          />
        </div>
        <button
          @click="sendComplexData"
          class="mt-2 px-3 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 text-sm"
        >
          发送复杂数据
        </button>
      </div>

      <!-- 连续发送演示 -->
      <div class="event-section">
        <h5 class="text-sm font-medium text-gray-700 mb-2">3. 连续事件发送</h5>
        <div class="flex space-x-2">
          <button
            @click="startContinuousEmit"
            :disabled="isEmitting"
            class="px-3 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50 text-sm"
          >
            {{ isEmitting ? '发送中...' : '开始连续发送' }}
          </button>
          <button
            @click="stopContinuousEmit"
            :disabled="!isEmitting"
            class="px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600 disabled:opacity-50 text-sm"
          >
            停止发送
          </button>
        </div>
      </div>

      <!-- 预定义事件 -->
      <div class="event-section">
        <h5 class="text-sm font-medium text-gray-700 mb-2">4. 预定义事件</h5>
        <div class="grid grid-cols-2 gap-2">
          <button
            @click="sendInfoEvent"
            class="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
          >
            发送信息事件
          </button>
          <button
            @click="sendWarningEvent"
            class="px-3 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-sm"
          >
            发送警告事件
          </button>
          <button
            @click="sendErrorEvent"
            class="px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600 text-sm"
          >
            发送错误事件
          </button>
          <button
            @click="sendSuccessEvent"
            class="px-3 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
          >
            发送成功事件
          </button>
        </div>
      </div>
    </div>

    <!-- 事件说明 -->
    <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
      <h5 class="text-sm font-medium text-blue-800 mb-2">📤 Emit 事件说明</h5>
      <ul class="text-xs text-blue-700 space-y-1">
        <li>• 事件名使用 kebab-case 命名 (send-message)</li>
        <li>• 可以传递单个值或多个参数</li>
        <li>• 父组件通过 @event-name 监听事件</li>
        <li>• 遵循单向数据流：数据向下，事件向上</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue'

// 定义 emits
const emit = defineEmits<{
  sendMessage: [message: string]
  customEvent: [data: any]
}>()

// 响应式数据
const simpleMessage = ref('')
const complexData = ref({
  type: 'update',
  value: 100,
})
const isEmitting = ref(false)
let emitTimer: number | null = null

// 发送简单消息
const sendSimpleMessage = () => {
  if (simpleMessage.value.trim()) {
    emit('sendMessage', simpleMessage.value)
    simpleMessage.value = '' // 清空输入
  }
}

// 发送复杂数据
const sendComplexData = () => {
  const data = {
    type: complexData.value.type || 'unknown',
    value: complexData.value.value || 0,
    timestamp: new Date().toISOString(),
    source: 'EmitChild',
  }
  emit('customEvent', data)
}

// 开始连续发送
const startContinuousEmit = () => {
  isEmitting.value = true
  let counter = 0

  emitTimer = setInterval(() => {
    counter++
    emit('sendMessage', `连续消息 #${counter}`)

    // 发送10条消息后自动停止
    if (counter >= 10) {
      stopContinuousEmit()
    }
  }, 1000)
}

// 停止连续发送
const stopContinuousEmit = () => {
  if (emitTimer) {
    clearInterval(emitTimer)
    emitTimer = null
  }
  isEmitting.value = false
}

// 预定义事件
const sendInfoEvent = () => {
  emit('customEvent', {
    level: 'info',
    message: '这是一个信息事件',
    icon: 'ℹ️',
  })
}

const sendWarningEvent = () => {
  emit('customEvent', {
    level: 'warning',
    message: '这是一个警告事件',
    icon: '⚠️',
  })
}

const sendErrorEvent = () => {
  emit('customEvent', {
    level: 'error',
    message: '这是一个错误事件',
    icon: '❌',
  })
}

const sendSuccessEvent = () => {
  emit('customEvent', {
    level: 'success',
    message: '这是一个成功事件',
    icon: '✅',
  })
}

// 组件卸载时清理定时器
onUnmounted(() => {
  stopContinuousEmit()
})
</script>

<style scoped lang="scss">
.emit-child {
  @apply border border-gray-200 rounded-lg p-4 bg-gray-50;
}

.event-section {
  @apply p-3 bg-white rounded border border-gray-100;
}
</style>
